<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>RoleRealm - 角色选择</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'PingFang SC', 'Inter', sans-serif;
            background: #f8fafc;
            min-height: 100vh;
        }

        .header {
            background: white;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            padding: 15px 0;
            position: sticky;
            top: 0;
            z-index: 100;
        }

        .header-content {
            max-width: 1200px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 20px;
        }

        .logo {
            color: #1e3a8a;
            font-size: 24px;
            font-weight: bold;
        }

        .search-container {
            flex: 1;
            max-width: 400px;
            margin: 0 20px;
            position: relative;
        }

        .search-input {
            width: 100%;
            padding: 10px 40px 10px 16px;
            border: 2px solid #e5e7eb;
            border-radius: 25px;
            font-size: 14px;
            transition: all 0.3s ease;
        }

        .search-input:focus {
            outline: none;
            border-color: #3b82f6;
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
        }

        .search-icon {
            position: absolute;
            right: 12px;
            top: 50%;
            transform: translateY(-50%);
            color: #9ca3af;
        }

        .header-actions {
            display: flex;
            gap: 15px;
        }

        .header-btn {
            padding: 8px 16px;
            border: none;
            border-radius: 20px;
            background: #f8fafc;
            color: #1e3a8a;
            cursor: pointer;
            font-size: 14px;
            transition: all 0.3s ease;
        }

        .header-btn:hover {
            background: #e5e7eb;
        }

        .main-container {
            max-width: 1200px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: 250px 1fr 300px;
            gap: 20px;
            padding: 20px;
        }

        .sidebar {
            background: white;
            border-radius: 15px;
            padding: 20px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
            height: fit-content;
        }

        .sidebar-title {
            font-size: 18px;
            font-weight: bold;
            color: #1e3a8a;
            margin-bottom: 15px;
        }

        .filter-group {
            margin-bottom: 20px;
        }

        .filter-label {
            font-size: 14px;
            font-weight: bold;
            color: #374151;
            margin-bottom: 8px;
            display: block;
        }

        .filter-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }

        .filter-tag {
            padding: 6px 12px;
            border: 2px solid #e5e7eb;
            border-radius: 20px;
            background: white;
            color: #6b7280;
            font-size: 12px;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .filter-tag:hover {
            border-color: #3b82f6;
            color: #3b82f6;
        }

        .filter-tag.active {
            background: #3b82f6;
            color: white;
            border-color: #3b82f6;
        }

        .filter-tag.history {
            border-color: #92400e;
            color: #92400e;
        }

        .filter-tag.history:hover,
        .filter-tag.history.active {
            background: #92400e;
            color: white;
        }

        .filter-tag.literature {
            border-color: #7c3aed;
            color: #7c3aed;
        }

        .filter-tag.literature:hover,
        .filter-tag.literature.active {
            background: #7c3aed;
            color: white;
        }

        .filter-tag.virtual {
            border-color: #059669;
            color: #059669;
        }

        .filter-tag.virtual:hover,
        .filter-tag.virtual.active {
            background: #059669;
            color: white;
        }

        .characters-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 20px;
        }

        .character-card {
            background: white;
            border-radius: 15px;
            padding: 20px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
            transition: all 0.3s ease;
            cursor: pointer;
        }

        .character-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        }

        .character-avatar {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            background: linear-gradient(135deg, #3b82f6, #1e3a8a);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 32px;
            font-weight: bold;
            margin: 0 auto 15px;
        }

        .character-name {
            font-size: 18px;
            font-weight: bold;
            color: #1e3a8a;
            text-align: center;
            margin-bottom: 8px;
        }

        .character-description {
            font-size: 14px;
            color: #6b7280;
            text-align: center;
            margin-bottom: 15px;
            line-height: 1.5;
        }

        .character-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            justify-content: center;
            margin-bottom: 15px;
        }

        .character-tag {
            padding: 4px 8px;
            background: #f1f5f9;
            color: #475569;
            border-radius: 12px;
            font-size: 11px;
        }

        .start-chat-btn {
            width: 100%;
            padding: 10px;
            background: #f59e0b;
            color: white;
            border: none;
            border-radius: 10px;
            font-size: 14px;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .start-chat-btn:hover {
            background: #d97706;
        }

        .recommendations {
            background: linear-gradient(135deg, #fef3c7, #fde68a);
            border-radius: 15px;
            padding: 20px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
            height: fit-content;
        }

        .recommendations-title {
            font-size: 18px;
            font-weight: bold;
            color: #92400e;
            margin-bottom: 15px;
        }

        .recommendation-item {
            display: flex;
            align-items: center;
            padding: 10px;
            background: white;
            border-radius: 10px;
            margin-bottom: 10px;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .recommendation-item:hover {
            transform: translateX(5px);
        }

        .recommendation-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: linear-gradient(135deg, #3b82f6, #1e3a8a);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 16px;
            font-weight: bold;
            margin-right: 10px;
        }

        .recommendation-info {
            flex: 1;
        }

        .recommendation-name {
            font-size: 14px;
            font-weight: bold;
            color: #1e3a8a;
        }

        .recommendation-reason {
            font-size: 12px;
            color: #6b7280;
        }

        .back-to-top {
            position: fixed;
            bottom: 30px;
            right: 30px;
            width: 50px;
            height: 50px;
            background: #f59e0b;
            color: white;
            border: none;
            border-radius: 50%;
            cursor: pointer;
            font-size: 20px;
            box-shadow: 0 4px 15px rgba(245, 158, 11, 0.3);
            transition: all 0.3s ease;
            display: none;
        }

        .back-to-top:hover {
            transform: translateY(-3px);
            box-shadow: 0 6px 20px rgba(245, 158, 11, 0.4);
        }

        @media (max-width: 1024px) {
            .main-container {
                grid-template-columns: 200px 1fr;
            }
            
            .recommendations {
                display: none;
            }
        }

        @media (max-width: 768px) {
            .main-container {
                grid-template-columns: 1fr;
                padding: 10px;
            }
            
            .header-content {
                flex-direction: column;
                gap: 15px;
            }
            
            .search-container {
                max-width: 100%;
                margin: 0;
            }
            
            .characters-grid {
                grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            }
            
            .sidebar {
                order: 2;
            }
        }
    </style>
</head>
<body>
    <header class="header">
        <div class="header-content">
            <div class="logo">RoleRealm</div>
            <div class="search-container">
                <input type="text" class="search-input" placeholder="搜索角色名称、类别、时代...">
                <span class="search-icon">🔍</span>
            </div>
            <div class="header-actions">
                <button class="header-btn" onclick="window.location.href='user-settings.html'">设置</button>
                <button class="header-btn" onclick="window.location.href='login.html'">退出</button>
            </div>
        </div>
    </header>

    <div class="main-container">
        <aside class="sidebar">
            <h3 class="sidebar-title">角色分类</h3>
            <div class="filter-group">
                <label class="filter-label">类型</label>
                <div class="filter-tags">
                    <span class="filter-tag history active" data-category="history">历史人物</span>
                    <span class="filter-tag literature" data-category="literature">文学角色</span>
                    <span class="filter-tag virtual" data-category="virtual">虚拟角色</span>
                </div>
            </div>
            
            <div class="filter-group">
                <label class="filter-label">时代</label>
                <div class="filter-tags">
                    <span class="filter-tag" data-era="ancient">古代</span>
                    <span class="filter-tag" data-era="medieval">中世纪</span>
                    <span class="filter-tag" data-era="modern">近代</span>
                    <span class="filter-tag" data-era="contemporary">现代</span>
                </div>
            </div>
            
            <div class="filter-group">
                <label class="filter-label">地区</label>
                <div class="filter-tags">
                    <span class="filter-tag" data-region="china">中国</span>
                    <span class="filter-tag" data-region="europe">欧洲</span>
                    <span class="filter-tag" data-region="america">美洲</span>
                    <span class="filter-tag" data-region="asia">亚洲</span>
                </div>
            </div>
            
            <div class="filter-group">
                <label class="filter-label">语言</label>
                <div class="filter-tags">
                    <span class="filter-tag" data-language="chinese">中文</span>
                    <span class="filter-tag" data-language="english">英文</span>
                    <span class="filter-tag" data-language="multilingual">多语言</span>
                </div>
            </div>
        </aside>

        <main class="characters-grid">
            <div class="character-card" data-character="socrates">
                <div class="character-avatar">苏</div>
                <h3 class="character-name">苏格拉底</h3>
                <p class="character-description">古希腊哲学家，西方哲学的奠基者，以"我知道我一无所知"闻名</p>
                <div class="character-tags">
                    <span class="character-tag">哲学</span>
                    <span class="character-tag">古希腊</span>
                    <span class="character-tag">思辨</span>
                </div>
                <button class="start-chat-btn" onclick="startChat('socrates')">开始对话</button>
            </div>

            <div class="character-card" data-character="shakespeare">
                <div class="character-avatar">莎</div>
                <h3 class="character-name">莎士比亚</h3>
                <p class="character-description">英国文学巨匠，创作了《哈姆雷特》《罗密欧与朱丽叶》等经典作品</p>
                <div class="character-tags">
                    <span class="character-tag">文学</span>
                    <span class="character-tag">戏剧</span>
                    <span class="character-tag">英国</span>
                </div>
                <button class="start-chat-btn" onclick="startChat('shakespeare')">开始对话</button>
            </div>

            <div class="character-card" data-character="einstein">
                <div class="character-avatar">爱</div>
                <h3 class="character-name">爱因斯坦</h3>
                <p class="character-description">理论物理学家，相对论的创立者，诺贝尔物理学奖获得者</p>
                <div class="character-tags">
                    <span class="character-tag">科学</span>
                    <span class="character-tag">物理</span>
                    <span class="character-tag">德国</span>
                </div>
                <button class="start-chat-btn" onclick="startChat('einstein')">开始对话</button>
            </div>

            <div class="character-card" data-character="davinci">
                <div class="character-avatar">达</div>
                <h3 class="character-name">达芬奇</h3>
                <p class="character-description">文艺复兴时期的全才，画家、发明家、科学家，《蒙娜丽莎》的作者</p>
                <div class="character-tags">
                    <span class="character-tag">艺术</span>
                    <span class="character-tag">发明</span>
                    <span class="character-tag">意大利</span>
                </div>
                <button class="start-chat-btn" onclick="startChat('davinci')">开始对话</button>
            </div>

            <div class="character-card" data-character="curie">
                <div class="character-avatar">居</div>
                <h3 class="character-name">居里夫人</h3>
                <p class="character-description">波兰裔法国物理学家和化学家，首位获得诺贝尔奖的女性</p>
                <div class="character-tags">
                    <span class="character-tag">科学</span>
                    <span class="character-tag">化学</span>
                    <span class="character-tag">波兰</span>
                </div>
                <button class="start-chat-btn" onclick="startChat('curie')">开始对话</button>
            </div>

            <div class="character-card" data-character="confucius">
                <div class="character-avatar">孔</div>
                <h3 class="character-name">孔子</h3>
                <p class="character-description">中国古代思想家、教育家，儒家学派创始人，被尊为"至圣先师"</p>
                <div class="character-tags">
                    <span class="character-tag">哲学</span>
                    <span class="character-tag">教育</span>
                    <span class="character-tag">中国</span>
                </div>
                <button class="start-chat-btn" onclick="startChat('confucius')">开始对话</button>
            </div>
        </main>

        <aside class="recommendations">
            <h3 class="recommendations-title">推荐角色</h3>
            <div class="recommendation-item" onclick="startChat('socrates')">
                <div class="recommendation-avatar">苏</div>
                <div class="recommendation-info">
                    <div class="recommendation-name">苏格拉底</div>
                    <div class="recommendation-reason">基于您的兴趣推荐</div>
                </div>
            </div>
            <div class="recommendation-item" onclick="startChat('shakespeare')">
                <div class="recommendation-avatar">莎</div>
                <div class="recommendation-info">
                    <div class="recommendation-name">莎士比亚</div>
                    <div class="recommendation-reason">热门角色</div>
                </div>
            </div>
            <div class="recommendation-item" onclick="startChat('einstein')">
                <div class="recommendation-avatar">爱</div>
                <div class="recommendation-info">
                    <div class="recommendation-name">爱因斯坦</div>
                    <div class="recommendation-reason">新角色推荐</div>
                </div>
            </div>
        </aside>
    </div>

    <button class="back-to-top" onclick="scrollToTop()">↑</button>

    <script>
        // 角色数据
        const characters = {
            socrates: { name: '苏格拉底', category: 'history', era: 'ancient', region: 'europe', language: 'multilingual' },
            shakespeare: { name: '莎士比亚', category: 'literature', era: 'medieval', region: 'europe', language: 'english' },
            einstein: { name: '爱因斯坦', category: 'history', era: 'modern', region: 'europe', language: 'multilingual' },
            davinci: { name: '达芬奇', category: 'history', era: 'medieval', region: 'europe', language: 'multilingual' },
            curie: { name: '居里夫人', category: 'history', era: 'modern', region: 'europe', language: 'multilingual' },
            confucius: { name: '孔子', category: 'history', era: 'ancient', region: 'china', language: 'chinese' }
        };

        // 筛选功能
        function filterCharacters() {
            const activeFilters = {
                category: document.querySelector('.filter-tag.active[data-category]')?.dataset.category,
                era: document.querySelector('.filter-tag.active[data-era]')?.dataset.era,
                region: document.querySelector('.filter-tag.active[data-region]')?.dataset.region,
                language: document.querySelector('.filter-tag.active[data-language]')?.dataset.language
            };

            const cards = document.querySelectorAll('.character-card');
            cards.forEach(card => {
                const characterId = card.dataset.character;
                const character = characters[characterId];
                let show = true;

                Object.keys(activeFilters).forEach(filter => {
                    if (activeFilters[filter] && character[filter] !== activeFilters[filter]) {
                        show = false;
                    }
                });

                card.style.display = show ? 'block' : 'none';
            });
        }

        // 筛选标签点击事件
        document.querySelectorAll('.filter-tag').forEach(tag => {
            tag.addEventListener('click', function() {
                // 移除同组其他标签的active状态
                const group = this.closest('.filter-group');
                group.querySelectorAll('.filter-tag').forEach(t => t.classList.remove('active'));
                
                // 添加当前标签的active状态
                this.classList.add('active');
                
                // 执行筛选
                filterCharacters();
            });
        });

        // 搜索功能
        document.querySelector('.search-input').addEventListener('input', function() {
            const searchTerm = this.value.toLowerCase();
            const cards = document.querySelectorAll('.character-card');
            
            cards.forEach(card => {
                const name = card.querySelector('.character-name').textContent.toLowerCase();
                const description = card.querySelector('.character-description').textContent.toLowerCase();
                
                if (name.includes(searchTerm) || description.includes(searchTerm)) {
                    card.style.display = 'block';
                } else {
                    card.style.display = 'none';
                }
            });
        });

        // 开始对话
        function startChat(characterId) {
            window.location.href = `chat.html?character=${characterId}`;
        }

        // 返回顶部
        function scrollToTop() {
            window.scrollTo({ top: 0, behavior: 'smooth' });
        }

        // 显示/隐藏返回顶部按钮
        window.addEventListener('scroll', function() {
            const backToTop = document.querySelector('.back-to-top');
            if (window.pageYOffset > 300) {
                backToTop.style.display = 'block';
            } else {
                backToTop.style.display = 'none';
            }
        });
    </script>
</body>
</html>
